<template>
  <!-- 新增工单 表单 -->
  <a-modal
    v-model:open="visible"
    title="新增工单"
    @ok="handleOk"
    class="addStation"
    destroyOnClose
    :width="480"
    :maskClosable="false"
    @cancel="cancel"
    centered
  >
    <a-form
      :model="form"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
    >
      <a-form-item label="电站名称" name="stationId">
        <a-select
          v-model:value="form.stationId"
          class="formInput"
          placeholder="请选择"
          allow-clear
          show-search
          optionFilterProp="label"
        >
          <a-select-option
            v-for="item in stationtList"
            :value="item.stationId"
            :key="item.stationId"
            :label="item.stationName"
          >
            {{ item.stationName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="问题描述" name="exceptionDesc">
        <a-textarea
          v-model:value="form.exceptionDesc"
          class="formInput"
          placeholder="请输入"
          :rows="5"
        />
      </a-form-item>
      <a-form-item label="运营部建议" name="exceptionOperateSuggest">
        <a-textarea
          v-model:value="form.exceptionOperateSuggest"
          class="formInput"
          placeholder="请输入"
          :rows="5"
        />
      </a-form-item>
      <a-form-item label="优先级" name="exceptionPriority">
        <a-select
          v-model:value="form.exceptionPriority"
          class="formInput"
          placeholder="请选择"
          allow-clear
          show-search
          optionFilterProp="label"
        >
          <a-select-option
            v-for="item in WORK_ORDER_PRIORITY_LIST"
            :value="item.value"
            :key="item.value"
            :label="item.label"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="上传附件">
        <a-upload
          v-model:file-list="fileList"
          name="file"
          list-type="picture-card"
          class="addEquipUpload"
          :action="uploadUrl"
          :headers="headers"
          :multiple="true"
          method="post"
          :preview-file="previewFile"
          :before-upload="beforeUpload"
          @change="handleUploadChange"
          @remove="handleRemove"
        >
          <div>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">上传</div>
          </div>
        </a-upload>
      </a-form-item>
    </a-form>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>


import storage from "@/utils/storage";
import {
  WORK_ORDER_PRIORITY_LIST,
  WORK_ORDER_TYPE,
} from "@/constants/workOrder";
const $api = inject("$api");
const props = defineProps({
  addOrderVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
  stationtList: {
    type: Array,
  },
});
const visible = ref(props.addOrderVisible);
const emits = defineEmits(["update:addOrderVisible", "getOrderList"]);
const fileList = ref([]);
const userInf = storage.getItem("USER_INFO");
const headers = ref({
  Authorization: "Bearer " + userInf.access_token,
});
watch(
  () => props.addOrderVisible,
  async (val) => {
    visible.value = val;
  }
);
const labelCol = { style: { width: "100px" } };
const formRef = ref(null);
const form = ref({
  stationId: undefined,
  exceptionDesc: undefined,
  exceptionOperateSuggest: undefined,
  exceptionPriority: undefined,
  attachFileIds: undefined,
});
const rules = ref({
  stationId: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
  exceptionDesc: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
  ],
  exceptionOperateSuggest: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
  ],
  exceptionPriority: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
});
const supplierList = ref([]);
const cancel = () => {
  emits("update:addOrderVisible", false);
  formRef.value.clearValidate();
  form.value = {
    stationId: undefined,
    exceptionDesc: undefined,
    exceptionOperateSuggest: undefined,
    exceptionPriority: undefined,
    attachFileIds: undefined,
  };
  fileList.value = [];
};
const loading = ref(false);
const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      const params = {
        ...form.value,
        type: WORK_ORDER_TYPE.ERROR,
        attachFileIds: fileList.value.map((item) => item.response?.data?.id).join(','),
      };
      loading.value = true;
      const res = await $api.addWorkOrder(params);
      loading.value = false;
      if (res && res.code === 0) {
        message.success("新增成功");
        cancel();
        emits("getOrderList");
      }
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const uploadUrl = async (val) => {
  return `${$api.uploadAction().url}`;
};
const handleUploadChange = (data) => {
  // if (data.file?.response?.code === 0) {
  //   form.value.attachmentFileId = data.file.response.data.id;
  // }
};
</script>

<style lang="less" scoped>
.form {
  padding: 0 40px;
  margin-top: 30px;
}
.formInput,
.formSelect {
  width: 300px;
}
.ant-form-item {
  margin-top: 20px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
</style>
<style lang="less">
.addEquipUpload {
  .anticon-eye {
    display: none;
  }
}
.ant-upload-list {
  width: 340px;
}
</style>